<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<style>
    html, body, #main {
        width: 100%;
        height: 100%;
        margin: 0;
        background: #ccc;
    }

    .block {
        text-align: center;
        margin: 20px;
    }

    .block .ec {
        background: #fff;
        width: 700px;
        height: 400px;
        margin: 5px auto;
    }
</style>
<div id="main"></div>

<script src="data/timelineGDP.js"></script>

<script>

    require([
        'echarts'
    ], function (echarts) {
        var zrUtil = echarts.util;

        makeChart({
            timeline: {
                label: {
                    normal: {
                        position: 10,
                        rotate: 45,
                        textStyle: {
                            align: 'right',
                            baseline: 'middle'
                        }
                    }
                }
            }
        });
        makeChart({
            timeline: {
                inverse: true,
                symbol: 'path://M0,0L10,0L10,10L0,10L0,0z',
                symbolSize: [1, 6],
                symbolOffset: [0, 3],
                symbolRotate: 30
            }
        });

        makeChart({timeline: {inverse: true, controlStyle: {position: 'right'}}, width: 400});

        makeChart({timeline: {orient: 'vertical', x: 0, y: 10, width: 55, height: '80%'}});
        makeChart({timeline: {orient: 'vertical', inverse: true, rewind: true, x: 0, y: 10, width: 55, height: '80%'}});
        makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%'}});
        makeChart({
            timeline: {
                orient: 'vertical',
                inverse: true,
                x: null,
                x2: 0,
                y: 10,
                width: 55,
                height: '80%',
                controlStyle: {position: 'top'}
            }
        });
        makeChart({timeline: {label: {position: 'top'}}});
        makeChart({
            timeline: {
                orient: 'vertical',
                inverse: true,
                x: null,
                x2: 0,
                y: 10,
                width: 55,
                height: '80%',
                label: {position: 'right'}
            }
        });
        makeChart({
            timeline: {
                orient: 'vertical',
                inverse: true,
                x: null,
                x2: 0,
                y: 10,
                width: 55,
                height: '80%',
                label: {position: -640, emphasis: {textStyle: {fontSize: 20}}}
            }
        });

        makeChart({timeline: {controlStyle: {show: false}}});
        makeChart({timeline: {controlStyle: {showPlayBtn: false}}});
        makeChart({timeline: {controlStyle: {showPrevBtn: false}}});
        makeChart({timeline: {controlStyle: {showNextBtn: false}}});
        makeChart({timeline: {}});

        makeChart({
            timeline: {
                lineStyle: {show: false},
                symbol: 'circle',
                itemStyle: {normal: {color: 'rgba(194,53,49, 0.5)'}},
                controlStyle: {
                    showPrevBtn: false,
                    showNextBtn: false,
                    normal: {color: 'rgba(194,53,49, 0.5)', borderColor: 'rgba(194,53,49, 0.5)'}
                },
                orient: 'vertical', inverse: true, x: 0, y: 40, width: 55, height: '80%'
            }
        });

        makeChart({
            timeline: {
                height: 55,
                data: [
                    '2002-01-01', '2003-01-01', '2004-01-01', '2005-01-01',
                    {
                        value: '2006-01-01',
                        symbol: 'pin',
                        symbolSize: 30
                    },
                    '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
                    {
                        value: '2011-01-01',
                        symbol: 'pin',
                        symbolSize: 30
                    }
                ]
            }
        });

        makeChart({
            timeline: {
                symbol: 'none'
            }
        });

        function makeChart(opt) {
            opt = opt || {};
            var containerEl = document.getElementById('main');
            var el = document.createElement('div');
            el.className = 'block';
            var widthString = '';
            if (opt.width != null) {
                widthString = ' style="width:' + opt.width + 'px" ';
            }
            el.innerHTML = '<div class="ec" ' + widthString + '></div><label>'
                + encodeHTML(JSON.stringify(opt)) + '</label>';
            containerEl.appendChild(el);

            var chart = echarts.init(el.firstChild, null, {});
            chart.setOption(getOption(opt));
        }

        function encodeHTML(source) {
            return source == null
                ? ''
                : String(source)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
        };

        function getOption(opt) {
            return zrUtil.merge({
                timeline: {
                    // y: 0,
                    axisType: 'category',
                    // realtime: false,
                    // loop: false,
                    autoPlay: false,
                    // currentIndex: 2,
                    playInterval: 1000,
                    // controlStyle: {
                    //     position: 'left'
                    // },
                    data: [
                        '2002-01-01', '2003-01-01', '2004-01-01', '2005-01-01', '2006-01-01',
                        '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01', '2011-01-01'
                    ],
                    label: {
                        formatter: function (s) {
                            return (new Date(s)).getFullYear();
                        }
                    },
                    controlStyle: {
                        // itemGap: 0,
                        normal: {
                            borderWidth: 1
                        }
                    },
                    itemStyle: {
                        // normal: {symbolSize: 1}
                    }
                },
                baseOption: {
                    backgroundColor: '#fff',
                    title: {
                        'subtext': '数据来自国家统计局'
                    },
                    tooltip: {'trigger': 'axis'},
                    calculable: true,
                    grid: {
                        x: 120, x2: 120, y: 80, y2: 100
                    },
                    xAxis: [
                        {
                            'type': 'category',
                            'axisLabel': {'interval': 0},
                            'data': [
                                '北京', '\n天津', '河北', '\n山西', '内蒙古', '\n辽宁', '吉林', '\n黑龙江',
                                '上海', '\n江苏', '浙江', '\n安徽', '福建', '\n江西', '山东', '\n河南',
                                '湖北', '\n湖南', '广东', '\n广西', '海南', '\n重庆', '四川', '\n贵州',
                                '云南', '\n西藏', '陕西', '\n甘肃', '青海', '\n宁夏', '新疆'
                            ],
                            splitLine: {show: false}
                        }
                    ],
                    yAxis: [
                        {
                            'type': 'value',
                            'name': 'GDP（亿元）',
                            'max': 53500
                        },
                        {
                            'type': 'value',
                            'name': '其他（亿元）',
                            splitLine: {show: false}
                        }
                    ],
                    series: [
                        {
                            name: 'GDP',
                            type: 'bar',
                            markLine: {
                                symbol: ['arrow', 'none'],
                                symbolSize: [4, 2],
                                itemStyle: {
                                    normal: {
                                        lineStyle: {color: 'orange'},
                                        barBorderColor: 'orange',
                                        label: {
                                            position: 'left',
                                            formatter: function (params) {
                                                return Math.round(params.value);
                                            },
                                            textStyle: {color: 'orange'}
                                        }
                                    }
                                },
                                'data': [{'type': 'average', 'name': '平均值'}]
                            }
                        }
                        // {type: 'bar'},
                        // {type: 'bar'},
                        // {type: 'bar'},
                        // {type: 'bar'},
                        // {type: 'bar'}
                    ]
                },
                options: [
                    {
                        title: {text: '2002全国宏观经济指标'},
                        series: [
                            {
                                'name': 'GDP',
                                'data': dataMap.dataGDP['2002']
                            },
                            {
                                'name': '金融', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataFinancial['2002']
                            },
                            {
                                'name': '房地产', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataEstate['2002']
                            },
                            {
                                'name': '第一产业', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataPI['2002']
                            },
                            {
                                'name': '第二产业', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataSI['2002']
                            },
                            {
                                'name': '第三产业', 'yAxisIndex': 1, 'type': 'bar',
                                'data': dataMap.dataTI['2002']
                            }
                        ]
                    },
                    {
                        title: {'text': '2003全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2003']},
                            {'data': dataMap.dataFinancial['2003']},
                            {'data': dataMap.dataEstate['2003']},
                            {'data': dataMap.dataPI['2003']},
                            {'data': dataMap.dataSI['2003']},
                            {'data': dataMap.dataTI['2003']}
                        ]
                    },
                    {
                        title: {'text': '2004全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2004']},
                            {'data': dataMap.dataFinancial['2004']},
                            {'data': dataMap.dataEstate['2004']},
                            {'data': dataMap.dataPI['2004']},
                            {'data': dataMap.dataSI['2004']},
                            {'data': dataMap.dataTI['2004']}
                        ]
                    },
                    {
                        title: {'text': '2005全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2005']},
                            {'data': dataMap.dataFinancial['2005']},
                            {'data': dataMap.dataEstate['2005']},
                            {'data': dataMap.dataPI['2005']},
                            {'data': dataMap.dataSI['2005']},
                            {'data': dataMap.dataTI['2005']}
                        ]
                    },
                    {
                        title: {'text': '2006全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2006']},
                            {'data': dataMap.dataFinancial['2006']},
                            {'data': dataMap.dataEstate['2006']},
                            {'data': dataMap.dataPI['2006']},
                            {'data': dataMap.dataSI['2006']},
                            {'data': dataMap.dataTI['2006']}
                        ]
                    },
                    {
                        title: {'text': '2007全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2007']},
                            {'data': dataMap.dataFinancial['2007']},
                            {'data': dataMap.dataEstate['2007']},
                            {'data': dataMap.dataPI['2007']},
                            {'data': dataMap.dataSI['2007']},
                            {'data': dataMap.dataTI['2007']}
                        ]
                    },
                    {
                        title: {'text': '2008全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2008']},
                            {'data': dataMap.dataFinancial['2008']},
                            {'data': dataMap.dataEstate['2008']},
                            {'data': dataMap.dataPI['2008']},
                            {'data': dataMap.dataSI['2008']},
                            {'data': dataMap.dataTI['2008']}
                        ]
                    },
                    {
                        title: {'text': '2009全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2009']},
                            {'data': dataMap.dataFinancial['2009']},
                            {'data': dataMap.dataEstate['2009']},
                            {'data': dataMap.dataPI['2009']},
                            {'data': dataMap.dataSI['2009']},
                            {'data': dataMap.dataTI['2009']}
                        ]
                    },
                    {
                        title: {'text': '2010全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2010']},
                            {'data': dataMap.dataFinancial['2010']},
                            {'data': dataMap.dataEstate['2010']},
                            {'data': dataMap.dataPI['2010']},
                            {'data': dataMap.dataSI['2010']},
                            {'data': dataMap.dataTI['2010']}
                        ]
                    },
                    {
                        title: {'text': '2011全国宏观经济指标'},
                        series: [
                            {'data': dataMap.dataGDP['2011']},
                            {'data': dataMap.dataFinancial['2011']},
                            {'data': dataMap.dataEstate['2011']},
                            {'data': dataMap.dataPI['2011']},
                            {'data': dataMap.dataSI['2011']},
                            {'data': dataMap.dataTI['2011']}
                        ]
                    }
                ]
            }, opt, true);
        }

    });
</script>
</body>
</html>
